<%@ page language="java" contentType="text/html; charset=utf-8"
		 pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cn">
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?3e333071a3344d3aca4055e478d3d968";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<head>
	<%
		String rootPath = request.getContextPath();
		request.setAttribute("rootPath", rootPath);
	%>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="${rootPath}/static/bootstrap/3.3.7/css/bootstrap.css">
	<link rel="stylesheet" href="${rootPath}/static/my/css/style.css">
	<title>征程</title>
</head>
<body>

<nav class=" navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<a href="#" class="navbar-brand logo">征程</a>
			<!--缩小的时候显示的下拉按钮-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<!--按钮显示的东西-->
			</button>
		</div>
		<div class="collapse navbar-collapse" id="navbar-collapse"><!--折叠的时候能缩起来-->
			<ul class="nav navbar-nav navbar-right">
				<li><a href="${rootPath}/index/show"><span class="glyphicon glyphicon-star"></span> 友链</a></li>
				<li><a href="${rootPath}/video/showfront"><span class="glyphicon glyphicon-film"></span> 视频</a></li>
				<li><a href="${rootPath}/book/showfront"><span class="glyphicon glyphicon-book"></span> 书籍</a></li>
				<li><a href="${rootPath}/to/about"><span class="glyphicon glyphicon-user"></span> 关于</a></li>
				<li class="active"><a href="${rootPath}/msg/show"><span class="glyphicon glyphicon-envelope"></span> 留言</a></li>
				<li><a href="${rootPath}/to/login"><span class="glyphicon glyphicon-home"></span> 登录</a></li>
			</ul>
		</div>
	</div>
</nav>

<div class="jumbotron">
	<div class="container">
		<hgroup>
			<h1>留言</h1>
			<h4>感谢您给我提各种学习的建议，推荐各种优秀的书籍和网站</h4>
		</hgroup>
	</div>
</div>

<div class="container topmargin">
	<form action="${rootPath}/msg/add" method="post">
		<p class="margin2">昵称（必填）</p>
		<input type="text" class="form-control" placeholder="Text input" name="name">
		<p class="margin2">email地址</p>
		<input type="text" class="form-control" placeholder="Text input" name="email">
		<p class="margin2">站点</p>
		<input type="text" class="form-control" placeholder="Text input" name="website">
		<p class="margin2">留言（必填）</p>
		<textarea class="form-control" rows="3" name="content"></textarea>
		<input class="btn btn-default margin2" type="submit" value="Submit" data-toggle="modal" data-target="#myModal">
	</form>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">回复留言</h4>
			</div>
			<div class="modal-body">
				<form method="post" action="${rootPath}/msg/addreply" id="replyform">

					<div class="form-group">
						<label for="msg-nickname" class="control-label">昵称</label>
						<textarea name="precontent" id="precontent" style="display: none"></textarea>
						<input type="text" class="form-control" id="msg-nickname" name="name">
					</div>
					<div class="form-group">
						<label for="msg-email" class="control-label">email地址</label>
						<input type="text" class="form-control" id="msg-email" name="email">
					</div>
					<div class="form-group">
						<label for="msg-website" class="control-label">站点</label>
						<input type="text" class="form-control" id="msg-website" name="website">
					</div>
					<div class="form-group">
						<label for="msg-content" class="control-label">留言</label>
						<textarea name="content" id="msg-content" cols="91" rows="4"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="submit" class="btn btn-primary" id="replyBtn">回复</button>
			</div>
		</div>
	</div>
</div>

<!-- content -->
<div class="container bottommargin">
	<c:forEach items="${msgList}" var="item" varStatus="status">
		<hr>
		<div>
			posted by:${item.name}&nbsp;&nbsp;&nbsp;时间:<fmt:formatDate value='${item.time}' pattern='yyyy-MM-dd  HH:mm:ss'/>
			<div style="float: right">
				<input type="button" onclick="fun(${item.id})" class="btn btn-default" value="回复" data-toggle="modal" data-target="#myModal">
				<input type="hidden" id="${item.id}"  value="<blockquote><pre>引用${item.name}的发言：</pre>${item.content}</blockquote>">
			</div>
			<br>
			<div style="margin-top: 20px">
					${item.content}
			</div>
		</div>
	</c:forEach>
</div>

<footer id="footer">
	<div class="container">
		<a href="${rootPath}/to/state">免责声明</a>
		<a href="http://www.javafxw.com/">源码下载</a>
		<a href="http://www.miitbeian.gov.cn/">晋ICP 备16009776</a>
	</div>
</footer>

<script src="${rootPath}/static/jquery/jquery-3.2.1.min.js"></script>
<script src="${rootPath}/static/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript">
    //提交修改的表单
    $("#replyBtn").click(function () {
        $("#replyform").submit();
    })
	//将所有回复按钮绑定这个事件，传递被回复的id到模态框
    function fun(id){
        var text = $("#"+id+"").val();
        $("#precontent").html(text);
	}
</script>
</body>
</html>